<template>
  <view class="container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="header-title">我的账号</text>
    </view>

    <!-- 用户信息列表 -->
    <view class="info-list">
      <!-- 头像 -->
      <view class="info-item" @tap="editAvatar">
        <view class="item-left">
          <text class="item-label">头像</text>
        </view>
        <view class="item-right">
          <image 
            :src="userInfo.avatar || '/static/logo.png'" 
            mode="aspectFill" 
            class="avatar-img"
          ></image>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 昵称 -->
      <view class="info-item" @tap="editNickname">
        <view class="item-left">
          <text class="item-label">昵称</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ userInfo.name || '未设置' }}</text>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 微信授权登录 -->
      <view class="info-item" @tap="wechatLogin">
        <view class="item-left">
          <text class="item-label">微信授权登录</text>
        </view>
        <view class="item-right">
          <text class="item-value">已授权</text>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 手机号绑定 -->
      <view class="info-item" @tap="bindPhone">
        <view class="item-left">
          <text class="item-label">手机号绑定</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ formatPhoneNumber(userInfo.phone) }}</text>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 所在地址 -->
      <view class="info-item" @tap="editAddress">
        <view class="item-left">
          <text class="item-label">所在地址</text>
        </view>
        <view class="item-right">
          <text class="item-value">{{ userInfo.address || '未设置' }}</text>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>

      <!-- 区域身份绑定 -->
      <view class="info-item" @tap="bindRegion">
        <view class="item-left">
          <text class="item-label">区域身份绑定</text>
        </view>
        <view class="item-right">
          <text class="item-value">科技园A区（30天内不可更改）</text>
          <view class="auth-tag">强制认证</view>
          <uni-icons type="arrowright" size="16" color="#ccc"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import { updateUserProfile } from '@/api/auth';

const userStore = useUserStore();

// 从 Store 获取用户信息
const userInfo = computed(() => ({
  avatar: userStore.userInfo?.avatar || '/static/logo.png',
  name: userStore.userInfo?.nickname || '未设置',
  phone: userStore.userInfo?.phone || '',
  address: userStore.userInfo?.address || '未设置'
}));

// 格式化手机号
const formatPhoneNumber = (phone: string) => {
  if (!phone) return '未绑定';
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 编辑头像
const editAvatar = () => {
  uni.showActionSheet({
    itemList: ['拍照','从相册选择'],
    itemColor: '#333',
    success: async (res) => {
      const index = res.tapIndex;
      if (index === 0) {
        await chooseImage('camera');
      } else if (index === 1) {
        await chooseImage('album');
      }
    }
  });
};

// 选择图片
const chooseImage = async (sourceType: 'camera' | 'album') => {
  try {
    const res = await uni.chooseImage({
      count: 1,
      sourceType: [sourceType],
      sizeType: ['compressed']
    });

    const filePath = res.tempFilePaths[0];
    
    // 更新本地 Store
    if (userStore.userInfo) {
      try {
        uni.showLoading({ title: '上传中...' });

        await updateUserProfile(userStore.userInfo.customerId, {
          avatarUrl: filePath
        });

        //更新本地store
        userStore.setUserInfo({
          ...userStore.userInfo,
          avatar: filePath
        });

        uni.hideLoading();
        uni.showToast({
          title: '头像已更新',
          icon: 'success'
        });
      } catch (error) {
        uni.hideLoading();
        console.error('更新头像失败:', error);
        uni.showToast({
          title: '头像上传失败',
          icon: 'none'
        });
      }
    }
  } catch (error) {
    console.error('选择图片失败:', error);
  }
};

// 编辑昵称
const editNickname = () => {
  uni.navigateTo({
    url: '/pages/my/selfInfo/nickName/nickName'
  });
};

// 编辑地址
const editAddress = () => {
  uni.showToast({
    title: '地址功能开发中',
    icon: 'none'
  })
}

// 微信登录
const wechatLogin = () => {
  uni.showToast({
    title: '微信授权登录功能待开发',
    icon: 'none'
  });
};

// 绑定手机号
const bindPhone = () => {
  uni.showToast({
    title: '手机号绑定功能待开发',
    icon: 'none'
  });
};

// 绑定区域身份
const bindRegion = () => {
  uni.showToast({
    title: '区域身份绑定功能待开发',
    icon: 'none'
  });
};

// 页面显示时刷新用户信息
onShow(() => {
  if (userStore.hasLogin && userStore.userInfo?.customerId) {
    userStore.fetchUserInfo();
  }
});
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  padding: 30rpx 30rpx 20rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.info-list {
  background-color: #ffffff;
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.item-left {
  flex: 1;
}

.item-label {
  font-size: 30rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 20rpx;
}

.item-value {
  font-size: 28rpx;
  color: #666;
}

.avatar-img {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  overflow: hidden;
}

.auth-tag {
  background-color: #ff3b30;
  color: #fff;
  padding: 4rpx 10rpx;
  border-radius: 4rpx;
  font-size: 24rpx;
}
</style>